/*
 * @Author: wangguanqing 
 * @Date: 2018-06-29 09:10:14 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-10 17:22:53
 */
<template>
  <div class="gq_dataKb">
    <bg-lay-out :background="'radial-gradient(ellipse at 50% 0%, #293B4F, #1C2436)'" :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
      <div slot="main" class="supplyChainData">
          <div class="dataDisplay">
              <top-logo-title>
                  <div slot="topTitle">供应链金融DashBoard</div>
              </top-logo-title>
              <div class="back">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
              <!-- 总金额 -->
              <div class="totalMoney">
                <p>总金额(万元)</p>
                <p>
                  <turn-page-num :numStyle="'font-size:80px;height:114px;width:57px'" :decimalnumStyle="'font-size:80px;height:114px;width:57px'" v-model="totalNum"></turn-page-num>
                </p>
              </div>
              <div class="message">
                  <!-- 代采购 -->
                  <div class="view">
                    <div class="purchase">
                      <div class="left">
                          <img src="../../../../../static/img/gq/supplyChain_icon1.png" />
                          <p>{{purchaseICountUp.businessType}}</p>
                      </div>
                      <div class="right">
                          <p> <span>金额</span> 
                           <span><number :integer="integer"  v-model="purchaseICountUp.detail.amount"/></span>
                          </p>
                          <p> <span>交易</span> 
                          <span><number v-model="purchaseICountUp.detail.transactionCount"/></span>
                          </p>
                          <p> <span>商家</span> 
                          <span><number v-model="purchaseICountUp.detail.customerCount"/></span>
                           </p>
                      </div>
                    </div>
                  </div>
                  <!-- 寄售 -->
                  <div class="view">
                    <div class="consignmentSales">
                      <div class="left">
                          <img src="../../../../../static/img/gq/supplyChain_icon4.png" />
                          <p>{{consignmentSalesICountUp.businessType}}</p>
                      </div>
                      <div class="right">
                          <p> <span>金额</span> 
                          <span><number :integer="integer"  v-model="consignmentSalesICountUp.detail.amount"/></span>
                          </p>
                          <p> <span>交易</span> 
                          <span><number  v-model="consignmentSalesICountUp.detail.transactionCount"/></span>
                          </p>
                          <p> <span>商家</span> 
                          <span><number  v-model="consignmentSalesICountUp.detail.customerCount"/></span>
                          </p>
                      </div>
                    </div>
                  </div>
                  <!-- 白条 -->
                  <div class="view">
                    <div class="blankNote">
                      <div class="left">
                          <img src="../../../../../static/img/gq/supplyChain_icon2.png" />
                          <p>{{blankNoteICountUp.businessType}}</p>
                      </div>
                      <div class="right">
                          <p> <span>金额</span> 
                          <span><number :integer="integer"  v-model="blankNoteICountUp.detail.amount"/></span>
                          </p>
                          <p> <span>交易</span> 
                          <span><number  v-model="blankNoteICountUp.detail.transactionCount"/></span>
                          </p>
                          <p> <span>商家</span> 
                          <span><number  v-model="blankNoteICountUp.detail.customerCount"/></span>
                          </p>
                      </div>
                    </div>
                  </div>
                  <!-- 应收 -->
                  <div class="view">
                    <div class="receivable">
                      <div class="left">
                          <img src="../../../../../static/img/gq/supplyChain_icon3.png" />
                          <p>{{receivableICountUp.businessType}}</p>
                      </div>
                      <div class="right">
                          <p> <span>金额</span> 
                          <span><number :integer="integer" v-model="receivableICountUp.detail.amount"/></span>
                          </p>
                          <p> <span>交易</span> 
                          <span><number  v-model="receivableICountUp.detail.transactionCount"/></span>
                          </p>
                          <p> <span>商家</span> 
                          <span><number  v-model="receivableICountUp.detail.customerCount"/></span>
                          </p>
                      </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
    </bg-lay-out>
  </div>
</template>
<script>
import topLogoTitle from "@/components/gq/topLogoTitle";
import mainTitle from "@/components/gq/mainTitle";
import bgLayOut from "@/components/bgLayOut/index";
import ICountUp from "vue-countup-v2";
import turnPageNum from "@/components/turnPageNum/index.vue";
import number from "@/components/number/index.vue";
import { GetSupplyChainAmountInfo } from "@/api/gq/index";
export default {
  name: "index",
  components: {
    topLogoTitle,
    mainTitle,
    bgLayOut,
    ICountUp,
    turnPageNum,
    number
  },
  mounted() {
    this.fetchData();
    this.autoTimer = setInterval(() => {
      // 静默请求
      this.$utils.showLoading = false;
      this.fetchData();
    }, 300000);
  },
  beforeDestroy() {
    clearInterval(this.autoTimer);
  },
  data() {
    return {
      autoTimer: null,
      integer: false,
      totalNum: 1232,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      purchaseICountUp: {
        // 代采购 - 金额/交易/商家
        businessType: "",
        detail: {
          amount: 0,
          transactionCount: 0,
          customerCount: 0
        }
      },
      blankNoteICountUp: {
        // 白条 - 金额/交易/商家
        businessType: "",
        detail: {
          amount: null,
          transactionCount: null,
          customerCount: null
        }
      },
      receivableICountUp: {
        // 应收 - 金额/交易/商家
        businessType: "",
        detail: {
          amount: null,
          transactionCount: null,
          customerCount: null
        }
      },
      consignmentSalesICountUp: {
        businessType: "",
        detail: {
          amount: null,
          transactionCount: null,
          customerCount: null
        }
      }
    };
  },
  methods: {
    fetchData() {
      // 静默请求
      this.fetchGetSupplyChainAmountInfo();
    },
    async fetchGetSupplyChainAmountInfo() {
      try {
        var res = await GetSupplyChainAmountInfo();
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "totalNum", Number(resData.total.toFixed(1)));
          this.$set(this, "purchaseICountUp", resData.list[0]);
          this.$set(this, "blankNoteICountUp", resData.list[1]);
          this.$set(this, "receivableICountUp", resData.list[2]);
          this.$set(this, "consignmentSalesICountUp", resData.list[3]);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

.supplyChainData {
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);

    .back {
      @include flex-ic-jc;
      @include absoluteAllSides(120, 0, 0, 0, 1);
      width: 867px;
      height: 877px;
      margin: auto;
      @keyframes turnLeft {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(20deg);
        }
      }
      @keyframes LargeTurnLeft {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(80deg);
        }
      }
      @keyframes turnRight {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-20deg);
        }
      }
      @keyframes positiveLargeBounceOn {
        from {
          transform: translateY(0px);
        }
        to {
          transform: translateY(-30px);
        }
      }
      @keyframes reverseLargeBounceOn {
        from {
          transform: translateY(0px);
        }
        to {
          transform: translateY(30px);
        }
      }
      @keyframes mediumBounceOn {
        from {
          transform: translateY(0px);
        }
        to {
          transform: translateY(20px);
        }
      }
      @keyframes smallBounceOn {
        from {
          transform: translateY(0px);
        }
        to {
          transform: translateY(10px);
        }
      }
      span {
        position: absolute;
      }
      span:nth-of-type(1) {
        z-index: 1;
        width: 867px;
        height: 877px;
        background: url("../../../../../static/img/gq/5ceng.png") left top
          no-repeat;
        background-size: 100% 100%;
      }
      span:nth-of-type(2) {
        z-index: 1;
        width: 635px;
        height: 722px;
        background: url("../../../../../static/img/gq/guding.png") left top
          no-repeat;
        background-size: 100% 100%;
      }
      span:nth-of-type(3) {
        z-index: 2;
        width: 317px;
        height: 317px;
        background: url("../../../../../static/img/gq/4ceng.png") left top
          no-repeat;
        animation: LargeTurnLeft 8s 2s ease infinite alternate;
        background-size: 100% 100%;
      }
      span:nth-of-type(11) {
        z-index: 2;
        width: 85px;
        height: 167px;
        background: url("../../../../../static/img/gq/￥.png") left top
          no-repeat;
        background-size: 100% 100%;
      }
      span:nth-of-type(4) {
        z-index: 3;
        width: 352px;
        height: 352px;
        background: url("../../../../../static/img/gq/1ceng.png") left top
          no-repeat;
        animation: turnRight 3s 2s ease infinite alternate;
        background-size: 100% 100%;
      }
      span:nth-of-type(5) {
        z-index: 4;
        width: 506px;
        height: 506px;
        background: url("../../../../../static/img/gq/2ceng.png") left top
          no-repeat;
        animation: turnLeft 3s 2s ease infinite alternate;
        background-size: 100% 100%;
      }
      span:nth-of-type(6) {
        z-index: 5;
        width: 810px;
        height: 810px;
        background: url("../../../../../static/img/gq/3ceng.png") left top
          no-repeat;
        animation: turnRight 3s 2s ease infinite alternate;
        background-size: 100% 100%;
      }
      span:nth-of-type(7) {
        z-index: 6;
        width: 253px;
        height: 253px;
        background: url("../../../../../static/img/gq/1.png") left top no-repeat;
        animation: positiveLargeBounceOn 2s 1s ease infinite alternate;
        right: 5px;
        top: 225px;
        background-size: 100% 100%;
      }
      span:nth-of-type(8) {
        z-index: 7;
        width: 253px;
        height: 253px;
        background: url("../../../../../static/img/gq/2.png") left top no-repeat;
        animation: reverseLargeBounceOn 1s 1s ease infinite alternate;
        left: 102px;
        bottom: 170px;
        background-size: 100% 100%;
      }
      span:nth-of-type(9) {
        z-index: 8;
        width: 163px;
        height: 163px;
        background: url("../../../../../static/img/gq/3.png") left top no-repeat;
        animation: mediumBounceOn 2s 1s ease infinite alternate;
        right: 200px;
        bottom: 250px;
        background-size: 100% 100%;
      }
      span:nth-of-type(10) {
        z-index: 9;
        width: 113px;
        height: 113px;
        background: url("../../../../../static/img/gq/4.png") left top no-repeat;
        animation: smallBounceOn 2s 1s ease infinite alternate;
        left: 269px;
        top: 115px;
        background-size: 100% 100%;
      }
    }
    .totalMoney {
      position: relative;
      top: 0;
      display: flex;
      margin: 0 auto;
      z-index: 1;
      flex-direction: column;
      p:nth-of-type(1) {
        margin-bottom: 10px;
        color: #28e787;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
      }
      p:nth-of-type(2) span {
        display: inline-block;
        width: 66px;
        height: 132px;
        color: #f0bd26;
        @include din(100px);
        text-align: center;
        background: rgba(#006953, 0.7);
      }
    }
    .message {
      @include absoluteAllSides(0, 0, 0, 0, 2);
      width: 1620px;
      height: 628px;
      margin: auto;
      .view {
        @include flex-ic-jsa;
        position: absolute;
        width: 452px;
        height: 244px;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: inherit;
          width: 452px;
          height: 62px;
          background: url("../../../../../static/img/gq/supplyChain_flat.png")
            left top no-repeat;
          background-size: 100% 100%;
        }
      }
      .view:nth-of-type(2) {
        top: 0;
        right: 0;
      }
      .view:nth-of-type(3) {
        bottom: 0;
        left: 0;
      }
      .view:nth-of-type(4) {
        right: 0;
        bottom: 0;
      }
      .purchase {
        @include flex-ic-jsa;
        justify-content: flex-start;
        position: relative;
        z-index: 1;
        width: 337px;
        height: 222px;
        .left {
          width: 220px;
          text-align: center;
          img {
            width: 132px;
            height: 132px;
            margin-bottom: 10px;
          }
          p {
            line-height: 1;
            color: #28e787;
            font-size: 28px;
            font-weight: bold;
            text-align: center;
          }
        }
        .right {
          p {
            @include flex-dc;
            margin-bottom: 10px;
            color: #28e787;
            line-height: 1;
            & span {
              font-size: 18px;
              display: flex;
              align-items: center;
            }
            & span:nth-of-type(2) {
              margin-top: 10px;
              color: #f0bd26;
              @include din(36px);
              &:after {
                margin-left: 8px;
                color: #28e787;
                font-size: 20px;
              }
            }
          }
          p:nth-of-type(1) span:nth-of-type(2)::after {
            display: inline-block;
            content: "万";
          }
          p:nth-of-type(2) span:nth-of-type(2):after {
            content: "笔";
          }
          p:nth-of-type(3) span:nth-of-type(2):after {
            content: "家";
          }
        }
      }
      .blankNote {
        @extend .purchase;
      }
      .receivable {
        @extend .purchase;
      }
      .consignmentSales {
        @extend .purchase;
      }
    }
  }
}
</style>